import React from 'react';
import { Editor } from '@tiptap/react';

interface HeadingSelectProps {
  editor: Editor;
}

const HeadingSelect: React.FC<HeadingSelectProps> = ({ editor }) => {
  const headingOptions = [
    { label: '正文', value: 0 },
    { label: '标题1', value: 1 },
    { label: '标题2', value: 2 },
    { label: '标题3', value: 3 },
    { label: '标题4', value: 4 },
  ];

  const getCurrentHeading = () => {
    for (let i = 1; i <= 4; i++) {
      if (editor.isActive('heading', { level: i })) {
        return i;
      }
    }
    return 0;
  };

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const level = Number(e.target.value);
    if (level === 0) {
      editor.chain().focus().setParagraph().run();
    } else {
      editor.chain().focus().toggleHeading({ level }).run();
    }
  };

  return (
    <select
      className="toolbar-select"
      value={getCurrentHeading()}
      onChange={handleChange}
    >
      {headingOptions.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

export default HeadingSelect;